<template>
    <n-form ref="formRef" :model="formData">
        <n-form-item label="账号" path="account">
            <n-input v-model:value="formData.account" disabled />
        </n-form-item>
        <n-form-item label="用户名" path="username">
            <n-input
                v-model:value="formData.userName"
                placeholder="请输入用户名"
                maxlength="20"
                clearable
            />
        </n-form-item>
        <n-form-item label="密码" path="password">
            <div class="w-full flex gap-10px">
                <n-input
                    disabled
                    default-value="12345678"
                    type="password"
                    class="w-full"
                />
                <n-button :focusable="false" @click="handleResetPassword">
                    修改密码
                </n-button>
            </div>
        </n-form-item>
    </n-form>
    <div class="w-full flex justify-end gap-2.5">
        <n-button :focusable="false" @click="handleReset"> 重置 </n-button>
        <n-button :focusable="false" type="primary" @click="handleSubmit">
            提交
        </n-button>
    </div>
</template>

<script lang="ts" setup>
import { h, ref, reactive } from "vue";
import { NInput, FormInst } from "naive-ui";
import { User } from "@/types/user";

const props = defineProps<{
    data: User;
}>();

const emits = defineEmits<{
    (e: "submit:data", data: User): void;
    (e: "update:password", password: string): void;
}>();

const formRef = ref<FormInst>();
const formData = reactive<User>(JSON.parse(JSON.stringify(props.data)));

const newPassword = ref("");

const handleResetPassword = () => {
    window.NDialog.info({
        title: "修改密码",
        content: () => {
            return h(
                "div",
                {
                    class: "wh-100%",
                },
                [
                    h(NInput, {
                        value: newPassword.value,
                        onInput: (newValue: string) => {
                            newPassword.value = newValue;
                        },
                        type: "password",
                        class: "w-full",
                        showCount: true,
                        maxlength: 15,
                        placeholder: "请输入新的密码",
                    }),
                ]
            );
        },
        closable: false,
        positiveText: "确定",
        negativeText: "取消",
        onPositiveClick: async () => {
            if (
                !/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(
                    newPassword.value
                )
            ) {
                window.NMessage.warning("请输入正确格式的密码");
                return false;
            }
            emits("update:password", newPassword.value);
        },
    });
};

const handleSubmit = async () => {
    if (!formRef.value) return;
    if (formData.userName === props.data.userName) {
        window.NMessage.warning("请修改用户名");
        return;
    }
    emits("submit:data", formData);
};

const handleReset = () => {
    formRef.value?.restoreValidation();
    Object.assign(formData, JSON.parse(JSON.stringify(props.data)));
};
</script>

<style scoped></style>
